<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
      <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
        <swiper-item v-for="(item, index) in data" :key="index">
          <view class="swiper-item" @click="clickBannerItem(item)">
            <image :src="item.image" mode="aspectFill" :draggable="false" />
          </view>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>

    <!-- 宫格组件 -->
    <uni-section title="故宫订票" type="line"></uni-section>

      <view class="container">
        <view class="example">
          <uni-forms ref="form" :model="form" labelWidth="80px">
            <uni-forms-item label="门票日期" name="date">
              <u-picker :show="showDate" :columns="dateList" @confirm="confirmDate" @cancel="cancelDate"></u-picker>
              <u-button @click="showDate = true">{{dateTitle}}</u-button>
            </uni-forms-item>
            <uni-forms-item label="门票类型" name="type">
              <u-picker :show="showType" keyName="ticketType" :columns="ticketList" @confirm="confirmType" @cancel="cancelType"></u-picker>
              <u-button @click="showType = true">{{typeTitle}}</u-button>
            </uni-forms-item>
            <uni-forms-item label="门票价格" name="price">
              <view class="totalPrice">
              	{{form.price}}
              </view>
            </uni-forms-item>
            <uni-forms-item label="购买数量" name="num">
              <u-number-box integer :min="1" :max="10000" :step="1" :value="form.num" @change="onNumChange" :disabled="false">
                <view
                    slot="minus"
                    class="minus"
                >
                  <u-icon
                      name="minus"
                      color="#FFFFFF"
                      size="16"
                  ></u-icon>
                </view>
                <text
                    slot="input"
                    class="input"
                >{{form.num}}</text>
                <view
                    slot="plus"
                    class="plus"
                >
                  <u-icon
                      name="plus"
                      color="#FFFFFF"
                      size="16"
                  ></u-icon>
                </view>
              </u-number-box>
            </uni-forms-item>
            <uni-forms-item label="门票总价" name="totalPrice">
			
					<view class="totalPrice">
						{{form.totalPrice}}
					</view>

            </uni-forms-item>
            <button type="primary" @click="submit">购买</button>
          </uni-forms>
        </view>

    </view>
  </view>
</template>

<script>
import {listTicket} from '@/api/system/ticket'
import {addOrder} from "@/api/system/order";
import dayjs from 'dayjs';
export default {
  data() {
    return {
      current: 0,
      swiperDotIndex: 0,
      dateTitle: '请选择日期',
      typeTitle: '请选择门票类型',
      data: [{
        image: '/static/images/banner/1.jpg'
      },
        {
          image: '/static/images/banner/2.jpg'
        },
        {
          image: '/static/images/banner/3.jpg'
        },
        {
          image: '/static/images/banner/4.jpg'
        }
      ],
      listTicket: [],
      dateList: [],
      ticketList: [],
      showDate: false,
      showType: false,
      form: {
        ticketId:'',
        date: '',
        type: '',
        num: '1',
        totalPrice: '0',
        price: '',//单价
      }
    }
  },
  methods: {
    clickBannerItem(item) {
      console.info(item)
    },
    changeSwiper(e) {
      this.current = e.detail.current
    },
    confirmDate(e) {
      this.showDate = false
      this.dateTitle = e.value[0]
      this.ticketList = this.listTicket.filter(item => {
        return item.ticketDate === e.value[0]
      })
      this.ticketList = [this.ticketList]
      console.log(this.ticketList)
    },
    cancelDate() {
      this.showDate = false
    },
    confirmType(e) {
      this.showType = false
      console.log(e)
      this.typeTitle = e.value[0].ticketType
      this.form.type = e.value[0].ticketType
      this.form.price = e.value[0].ticketPrice
      this.form.totalPrice = e.value[0].ticketPrice * this.form.num
      this.form.ticketId = e.value[0].ticketId
    },
    cancelType() {
      this.showType = false
    },
    onNumChange(e) {
      this.form.num = e.value
      this.form.totalPrice = this.form.price * this.form.num
    },
    submit() {
      let data = {
        'ticketId': this.form.ticketId,
        'num': this.form.num,
      }
      if (!this.form.ticketId) {
        return this.$modal.showToast('请选择门票')
      }
      addOrder(data).then(response => {
        uni.showToast({
          title: '购买成功',
          icon: 'none'
        })
        // 跳转到订票列表页面
        this.$tab.navigateTo('/pages/order/index')
      }).catch(error => {
        uni.showToast({
          title: '购买失败:'+error.msg,
          icon: 'none'
        })
      })
    }
  },
  onShow() {
    // 获取最近15天门票列表
    let params = {
      'beginTicketDate':dayjs().format('YYYY-MM-DD'),
      'endTicketDate': dayjs().add(15, 'day').format('YYYY-MM-DD')
    }
    listTicket(params).then(response => {
      this.listTicket = response.rows
      this.dateList = response.rows.map(item => {
        return item.ticketDate
      })
      //date 去重
      this.dateList = [...new Set(this.dateList)]
      this.dateList = [this.dateList]
      console.log(this.dateList)
    })
  },
  onLoad() {

  },
}
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100%;
  height: auto;
}
.totalPrice{
	font-size: 24px;
	padding: 5px 0 5px 0;
	width: 50%;
	background-color: #fff;
	min-height: 35px;
}
view {
  font-size: 14px;
  line-height: inherit;
}

/* #endif */

.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.uni-margin-wrap {
  width: 690rpx;
  width: 100%;
}

.swiper {
  height: 400rpx;
}

.swiper-box {
  height: 220px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 400rpx;
  line-height: 400rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    /* #ifndef APP-NVUE */
    margin: 0 auto;
    /* #endif */
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}

.container{
margin: 30px;
}

.minus {
  width: 26px;
  height: 26px;
  background-color: #fa0101;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input {
  padding: 0 10px;
  width: 60px;
  text-align: center;
  margin: 10px;
  font-size: 26px;
  background-color: #fff;
}

.plus {
  width: 26px;
  height: 26px;
  background-color: #32f107;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
